/*axios 在浏览器里会：
    创建一个 XMLHttpRequest（或 fetch）
    设置请求方法、请求头（如 Content-Type: application/json）
    把 JSON 字符串当做请求体发送
    监听服务器响应，拿到响应状态码和数据
*/
import axios from 'axios';

/*axios 会：
1.合并基础配置（baseURL、timeout、headers）和你传的参数（url、method、data）
2.进入请求拦截器，检查是否需要 JSON.stringify 请求体
3.通过浏览器的 XMLHttpRequest 或 fetch API 发出 POST 请求，地址是 http://localhost:8080/user/login
4.等待后端响应
5.收到响应后进入响应拦截器，提取并返回 response.data
6.返回一个 Promise，调用者（你组件里的 this.$api.userLogin(data).then(...)）拿到数据
*/
const service = axios.create({
    baseURL: 'http://localhost:8080',//基础路径
    timeout: 5000,//超时时间
    withCredentials: true,//发送请求时带上Cookie
    headers: {
        'Content-Type': 'application/json' // 👈 设置默认请求头为 JSON
    }
});

// 请求拦截器
//每次请求发送之前自动执行
service.interceptors.request.use(
    config => {
        // 自动 JSON 序列化 POST 请求体
        // if (config.method === 'post' && config.headers['Content-Type'] === 'application/json') {
        //     config.data = JSON.stringify(config.data);
        // }
        const token = localStorage.getItem('token'); // 从本地存储中读取 token
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`; // ✅ 必须加上 Bearer 前缀
        }
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
);

// 响应拦截器
//响应回到前端后，axios 先经过这里
service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return response.data;
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
);

export default service;
